    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>正则之综合案例</title>
        <style>
            label {
                width: 40px;
                display: inline-block;
            }
            .container {
                margin: 100px auto;
                width: 400px;
                padding: 50px;
                line-height: 40px;
                border: 1px solid #999;
                background: #efefef;
            }
            span {
                margin-left: 10px;
                font-size: 12px;
                padding-right: 61px;
                padding-left: 15px;
                color: #ccc;
            }
            .pwd{
                background: url("img1/strong.jpg") no-repeat;
                width: 220px;
                height: 20px;
            }
            .p1{
                background-position: 0 -20px;
            }
            .p2{
                background-position: 0 -40px;
            }
            .p3{
                background-position: 0 -60px;
            }
            .p4{
                background-position: 0 -80px;
            }
            .wrong{
                background: url("img1/error.png") no-repeat;
                color: crimson;
                font-size: 14px;
                font-weight: 600;
            }
            .right{
            background: url("img1/right.png") no-repeat;
            color: chartreuse;
            font-size: 14px;
            font-weight: 600;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <label for="QQ">QQ</label><input type="text" id="QQ"><span>请输入您的QQ号码</span><br>
        <label for="phone">电话</label><input type="text" id="phone"><span>请输入您的电话号码</span><br>
        <label for="cellphone">手机</label><input type="text" id="cellphone"><span>请输入您的手机号</span><br>
        <label for="email">邮箱</label><input type="text" id="email"><span>请输入您的邮箱</span><br>
        <label for="id1">账号</label><input type="text" id="id1"><span>请输入您的账号</span><br>
        <label for="id2">密码</label><input type="text" id="id2"><span>请输入您的密码</span><br>
        <div id="password" class="pwd"></div>
    </div>
    <script>
        // QQ号
        var inpt1=document.getElementById('QQ');
        var password=document.getElementById('password');
        inpt1.onblur=function () {
            var aaa=this.nextSibling||this.nextElementSibling;
            // console.log(aaa);
            // console.log("inpt1.value"+inpt1.value);
            // console.log("/^[1-9]\\d{5,11}$/"+(/^[1-9]\d{5,11}$/));
            if((/^[1-9]\d{5,11}$/).test(inpt1.value)){
                aaa.innerHTML="您输入的很正确！";
                aaa.className="right";
            }else {
                aaa.innerHTML="您输入的错误！";
                aaa.className="wrong";
            }
        };
        // 电话号码
        var phone=document.getElementById('phone');
        phone.onblur=function () {
            var aaa=this.nextSibling||this.nextElementSibling;
            // console.log(aaa);
            // console.log("inpt1.value"+inpt1.value);
            // console.log("/^[1-9]\\d{5,11}$/"+(/^[1-9]\d{5,11}$/));
            if((/^010-3\d{6}|0[2-9]\d{2}-[1-9]\d{6}$/).test(phone.value)){
                aaa.innerHTML="您输入的很正确！";
                aaa.className="right";
            }else {
                aaa.innerHTML="您输入的错误！";
                aaa.className="wrong";
            }
        };
        // 手机号码
        var telephone=document.getElementById('cellphone');
        telephone.onblur=function () {
            var aaa=this.nextSibling||this.nextElementSibling;
            // console.log(aaa);
            // console.log("inpt1.value"+inpt1.value);
            // console.log("/^[1-9]\\d{5,11}$/"+(/^[1-9]\d{5,11}$/));
            if((/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(telephone.value)){
                aaa.innerHTML="您输入的很正确！";
                aaa.className="right";
            }else {
                aaa.innerHTML="您输入的错误！";
                aaa.className="wrong";
            }
        };
        // email
        var email=document.getElementById('email');
        email.onblur=function () {
            var aaa=this.nextSibling||this.nextElementSibling;
            // console.log(aaa);
            // console.log("inpt1.value"+inpt1.value);
            // console.log("/^[1-9]\\d{5,11}$/"+(/^[1-9]\d{5,11}$/));
            if((/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/).test(email.value)){
                aaa.innerHTML="您输入的很正确！";
                aaa.className="right";
            }else {
                aaa.innerHTML="您输入的错误！";
                aaa.className="wrong";
            }
        };
        // 账号
        var id1=document.getElementById('id1');
        id1.onblur=function () {
            var aaa=this.nextSibling||this.nextElementSibling;
            console.log(aaa);
            console.log("(/[1-9][0-9]{8,}/).test(id1.value)---"+/[1-9][0-9]{8,10}/.test(id1.value));
            console.log(id1.value);
            // if((/^[1-9][0-9]{5,}&/).test(id1.value)){
            if((/^[1-9][0-9]{8,10}$/).test(id1.value)){
            // if (/^[1-9][0-9]{4,6}$/.test(this.value)){
                aaa.innerHTML="您输入的很正确！";
                aaa.className="right";
            }else {
                aaa.innerHTML="您输入的错误！";
                aaa.className="wrong";
            }
        };

        // 密码
        var id2=document.getElementById('id2');
        id2.onblur=function () {
            var aaa = this.nextSibling || this.nextElementSibling;
            console.log(aaa);
            console.log(/[1-9][0-9]{5,}/.test(id2.value));
            console.log(id2.value);
            if ((/^[A-Z].*[a-z]|[a-z].*[A-Z]$/).test(this.value)) {
                // if (/^[a-zA-Z0-9_\-$]{6,18}$/.test(this.value)) {
                // if ((/^[1-9][0-9]{5,}$/).test(this.value)) {
                //
                aaa.innerHTML = "您输入的很正确！";
                aaa.className = "right";
                password.className = "pwd p4";
                // } else if ((/^[A-Za-z0-9_\-$]{6,}$/).test(this.value)) {
                //     aaa.innerHTML = "您输入的很正确！";
                //     aaa.className = "right";
                //     password.className = "pwd p2";
                // } else if ((/^[[A-Z].*[a-z]]{6,}|[[a-z].*[A-Z]]{6,}$/).test(this.value)) {
                //     aaa.innerHTML = "您输入的很正确！";
                //     aaa.className = "right";
                //     password.className = "pwd p3";
                // }
            } else {
                aaa.innerHTML = "您输入的错误！";
                aaa.className = "wrong";
                // password.className = "pwd p3";
            }

        };











        // addEvent("QQ",function () {
        //     if((/^[1-9]\d{5,11}$/).test(this.value)){
        //         console.log("11");
        //     }else{
        //
        //     }
        // });

        function addEvent(str,fn){
            document.getElementById(str).onblur = fn;
        }

    </script>
    </body>
    </html>